<template>
    <div>
        <div class="header">
            <div class="box" v-if="!searchshow">
                <ul class="header-ul1 ul1">
                    <li class="li1">
                        <img src="../assets/img/中国.png" alt="" class="china">
                        CN/CNY
                    </li>
                    <li>语言|简体中文</li>
                    <li>客服服务</li>
                    <li><span class="iconfont icon-htmal5icon04" style="font-size: 12px margin-right: 2px;"></span>400 458 4878</li>
                </ul>
                <div class="logo"><img src="../assets/img/logo-03.png" alt=""></div>
                <ul class="header-ul1 ul2">
                    <li>登录</li>
                    <li><span class="iconfont icon-xin1" style="font-size: 20px;"></span></li>
                    <li><span class="iconfont icon-gouwudai3" style="margin-right: 9px;font-size: 20px;"></span>购物袋</li>
                    <li style="padding-right:0;"><span class="iconfont icon-sousuo" style="font-size: 20px;" @click="searchisshow(true)"></span></li>
                </ul>
            </div>
            <div class="search" v-if="searchshow">
                <div>
                    <span class="iconfont icon-sousuo1"></span>
                    <input type="text" placeholder="女士">
                    <span class="iconfont icon-guanbi1" @click="searchisshow(false)"></span>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            searchshow: false
        }
    },
    methods: {
        searchisshow(page) {
            this.searchshow = page
        }
    },
}
</script>

<style lang="scss">

.header {
    width: 100%;
    height: 78px;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    >.box {
        width: 1308px;
        margin: 0 auto;
        overflow: hidden;
        ul {
            color: #fff;
        }
        .header-ul1 {
            overflow: hidden;
            li {
                float: left;
                font-size: 12px;
                padding: 0 15px;
                line-height: 78px;
                .china {
                    width: 20px;
                    height: 14px;
                    margin-right: 10px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -7px;
                    
                }
            }
            li:hover {
                cursor: pointer;
            }
            .li1 {
                padding-left: 30px;
                position: relative;
            }
        }

        .ul1 {
            float: left;
        }
        .ul2 {
            float: right;
        }
        .logo {
            float: left;
            padding: 22px 0;
            margin-left: 213px;
            >img{
                width: 135px;
                height: 30px;
            }
        }
    }
    .search {
        width: 100%;
        background: #313131;
        >div {
            width: 1171px;
            margin: 0 auto;
            position: relative;
            >span:nth-child(1) {
                font-size: 28px;
                color: #827F77;
                line-height: 78px;
            }
            >span:nth-last-child(1){
                font-size: 32px;
                color: #827F77;
                line-height: 78px;
                position: absolute;
                right: 0;
            }
            >input {
                width: 1063px;
                padding: 3px;
                background: #313131;
                font-size: 14px;
                color: #D2D2D2;
                border: none;
                outline:none;
                position: absolute;
                top: 50%;
                left: 48px;
                margin-top: -11px;
            }
            input::placeholder {
                color: #D2D2D2;
                font-size: 14px;
            }
        }
       
    }
}

</style>